/***********************布局***********************/
.flex {
  display: flex;
}
.flex-J-SB {
  display: flex;
  justify-content: space-between;
}
.flex-J-SA {
  display: flex;
  justify-content: space-around;
}
.flex-A-C {
  display: flex;
  align-items: center;
  align-content: center;
}
.flex-A-B {
  display: flex;
  align-items: baseline;
  align-content: baseline;
}
.info-layout {
  display: grid;
  grid-template-columns: repeat(3, auto);
  align-items: center;
  gap: var(--gap-sm);
  & > * {
    text-align: center;
    &:nth-child(3n + 1) {
      justify-self: start;
    }
    &:nth-child(3n + 3) {
      justify-self: end;
    }
  }
}
.T-A-C {
  text-align: center;
}
.T-A-R {
  text-align: right;
}
.gridVar--col {
  display: grid;
  grid-template-columns: repeat(var(--col), auto);
  align-items: center;
  justify-items: center;
  gap: var(--gap-sm);
}
.gridVar--row {
  display: grid;
  grid-template-rows: repeat(var(--row), auto);
  align-items: center;
  justify-items: center;
  gap: var(--gap-sm);
}
/***********************间距***********************/
.auto-mtVar--P {
  & > * + * {
    margin-top: var(--P);
  }
}
.auto-mlVar--P {
  & > * + * {
    margin-left: var(--P);
  }
}
.auto-MT-xs {
  & > * + * {
    margin-top: var(--gap-xs);
  }
}
.auto-ML-xs {
  & > * + * {
    margin-left: var(--gap-xs);
  }
}
.auto-MT-sm {
  & > * + * {
    margin-top: var(--gap-sm);
  }
}
.auto-ML-sm {
  & > * + * {
    margin-left: var(--gap-sm);
  }
}
.auto-MT-md {
  & > * + * {
    margin-top: var(--gap-md);
  }
}
.auto-ML-md {
  & > * + * {
    margin-left: var(--gap-md);
  }
}

.auto-MT-lg {
  & > * + * {
    margin-top: var(--gap-lg);
  }
}
.auto-ML-lg {
  & > * + * {
    margin-left: var(--gap-lg);
  }
}
.auto-MT-xl {
  & > * + * {
    margin-top: var(--gap-xl);
  }
}
.auto-ML-xl {
  & > * + * {
    margin-left: var(--gap-xl);
  }
}

.MT-xs {
  margin-top: var(--gap-xs);
}
.ML-xs {
  margin-left: var(--gap-xs);
}
.MT-sm {
  margin-top: var(--gap-sm);
}
.ML-sm {
  margin-left: var(--gap-sm);
}
.MT-md {
  margin-top: var(--gap-md);
}
.ML-md {
  margin-left: var(--gap-md);
}
.MT-lg {
  margin-top: var(--gap-lg);
}
.ML-lg {
  margin-left: var(--gap-lg);
}
.MT-xl {
  margin-top: var(--gap-xl);
}
.ML-xl {
  margin-left: var(--gap-xl);
}
.MT-xxl {
  margin-top: var(--gap-xxl);
}
.ML-xxl {
  margin-left: var(--gap-xxl);
}
/* 外边距、内边距全局样式 */
.padl(100);
.padl(@n, @i: 0) when (@i =< @n) {
  .PL-@{i} {
    padding-left: 0px + @i !important;
  }
  .PR-@{i} {
    padding-right: 0px + @i !important;
  }
  .PT-@{i} {
    padding-top: 0px + @i !important;
  }
  .pb-@{i} {
    padding-bottom: 0px + @i !important;
  }
  .ML-@{i} {
    margin-left: 0px + @i !important;
  }
  .MR-@{i} {
    margin-right: 0px + @i !important;
  }
  .MT-@{i} {
    margin-top: 0px + @i !important;
  }
  .MB-@{i} {
    margin-bottom: 0px + @i !important;
  }
  .padl(@n, (@i+1));
}

// @for $i from 0 through 80 {
//   .MT-#{$i} {
//     margin-top: #{$i}px !important;
//   }
//   .MR-#{$i} {
//     margin-right: #{$i}px !important;
//   }
//   .MB-#{$i} {
//     margin-bottom: #{$i}px !important;
//   }
//   .ML-#{$i} {
//     margin-left: #{$i}px !important;
//   }
//   .PT-#{$i} {
//     padding-top: #{$i}px !important;
//   }
//   .PR-#{$i} {
//     padding-right: #{$i}px !important;
//   }
//   .pb-#{$i} {
//     padding-bottom: #{$i}px !important;
//   }
//   .PL-#{$i} {
//     padding-left: #{$i}px !important;
//   }
// }
